import { defineComponent, ref } from 'vue'
import { NCard, NDataTable, NPagination, NTag, useMessage } from 'naive-ui'
import styles from '@/views/integration/monitor/index.module.scss'
import dayjs from '@/utils/dayjs'
import { getTriggerListData } from '@/service/modules/integration-monitor'

const infoTriggerRecord = defineComponent({
  name: 'infoTriggerRecord',
  setup() {
    const createColumns = [
      { title: 'ID', key: 'id' },
      { title: '集合Id', key: 'collectionId' },
      { title: 'hive数据库', key: 'hiveDatabase' },
      { title: 'hive表名', key: 'hiveTableName' },
      { title: '集合名称', key: 'name' },
      { title: '触发者', key: 'who' },
      {
        title: '报警',
        key: 'ifAlert',
        render(row: any) {
          if (row.ifAlert === true) {
            return <NTag type={'error'}>触发报警</NTag>
          } else {
            return <NTag type={'success'}>正常</NTag>
          }
        }
      },
      { title: '任务状态', key: 'statue' },
      { title: '触发时间', key: 'triggerTime' },
      { title: '计算完成时间', key: 'computedTime' },
      {
        title: '触发距今',
        key: 'triggerTime',
        render(row: any) {
          // @ts-ignore
          return dayjs(row.triggerTime).fromNow()
        }
      }
    ]

    const triggerList = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        getTriggerList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        getTriggerList()
      }
    })

    const getTriggerList = function () {
      pagination.value.loading = true
      getTriggerListData(pagination.value.page, pagination.value.pageSize)
        .then((res: any) => {
          triggerList.value = res.data.records
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    const message = useMessage()

    getTriggerList()

    return {
      columns: createColumns,
      pagination,
      triggerList,
      message,
      getTriggerList
    }
  },
  render() {
    return (
      <NCard>
        <NDataTable
          columns={this.columns}
          data={this.triggerList}
          loading={this.pagination.loading}
        ></NDataTable>
        <NPagination
          class={styles['page-position']}
          display-order={['quick-jumper', 'pages', 'size-picker']}
          page-count={this.pagination.pageCount}
          page-size={this.pagination.pageSize}
          page-sizes={this.pagination.pageSizes}
          page={this.pagination.page}
          on-update:page={this.pagination.onUpdatePage}
          on-update:page-size={this.pagination.onUpdatePageSize}
          show-quick-jumper
          show-size-picker
        ></NPagination>
      </NCard>
    )
  }
})

export default infoTriggerRecord
